<template>
    <div id="app">
        天气App
        <header>
            <input type="text"
             class="search-box"
             placeholder="请输入城市名称..."
             autocomplete="off"
             @keypress.enter="setQuery"
             >
        </header>
        <main  v-if="data">
            <section class="location">
                <div class="city">{{data.city}}</div>
                <div class="date">{{data.date}}</div>
            </section>
            <div class="current">
                <div class="temp">{{data.tem}}℃</div>
                <div class="weather">{{data.wea}}</div>
                <div class="hi-low">{{data.tem_night}}度/{{data.tem_day}}度</div>
            </div>
        </main>
        <div v-else class="not">暂无数据</div>
    </div>
</template>
<script>
import axios from 'axios'
import { defineComponent, onMounted,ref,reactive } from 'vue'
export default defineComponent({
    name:'show',
    setup() {
        let data=ref('')
        
       const setQuery=async (e)=>{
        if(e.target.value){
        const response = await axios({ method:'get', url:`https://www.yiketianqi.com/free/day?appid=42299514&appsecret=4r4UBvF6&unescape=1&city=${e.target.value}` })
        data.value=response.data
        }
       }
        return {
            setQuery,
            data
        }
    }
    
})
</script>
<style ang='scss'>
    body{
        background-image: url('../assets/bj.jpg');
    }
    header{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px 15px 15px;
    }
    header input{
        width: 100%;
        max-width: 280px;
        padding: 10px 15px;
        border: none;
        outline: none;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 16px 0 16px 0;
        border-bottom: 3px solid yellow;
        color:blueviolet;
        font-size: 20px;
        font-weight: 300px;
        /* 开始快,结束慢 */
        transition: 0.2s ease-out;
    }
    header input:focus{
        background-color:aqua;
    }
    main{
        /* flex: 1 1 100%; */
        padding: 25px 25px 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: yellow;
    }
    .location .city{
        color: white;
        font-size: 32px;
        font-weight: 500;
        margin-bottom:5px ;
    }
    .location .date{
        color: white;
        font-size: 16px;
    }
    .current .temp{
        color: white;
        font-size: 100px;
        font-weight: 900;
        margin: 30px 0;
        text-shadow: 2px 10px rgba(0, 0, 0,0.6) ;
    }
    .current .weather{
        color: white;
        font-size: 32px;
        font-weight: 700;
        font-style: italic;
        margin-bottom: 15px;
        text-shadow: 2px 10px rgba(0, 0, 0,0.4) ;
    }
    .current .hi-low{
        color: white;
        font-size: 24px;
        font-weight: 500;
        text-shadow: 2px 10px rgba(0, 0, 0,0.4) ;
    }
    .not{
        padding: 10px 15px;
        color: white;
        font-size: 24px;
        font-weight: 500;
        text-shadow: 2px 10px rgba(0, 0, 0,0.4) ;
    }
</style>
